<template>
  <pro-layout
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nRender"
    v-bind="$store.state.app"
  >
    <template v-slot:menuHeaderRender>
      <template v-if="$store.state.app.layout === 'topmenu'">
        <div class="top_logo_header">
          <img src="~@/assets/cropped-logo.png" class="logo" alt="logo" @click="$router.push('/workplace')">
          <span>{{ title }}</span>
        </div>
      </template>
      <template v-else>
        <div v-if="!collapsed" class="logo_header">
          <img src="~@/assets/cropped-logo.png" :style="{width:'90px',height: '30px'}" alt="logo" @click="$router.push('/workplace')">
          <span style="line-height:30px;position:relative;top:17px;margin-left:5px;font-size:20px;font-weight:bold;" >{{ title }}</span>
        </div>
        <div v-if="collapsed" class="logo_header_collapsed">
          <img src="~@/assets/cropped-logo-s.png" class="logo" alt="logo" @click="$router.push('/workplace')">
        </div>
      </template>
    </template>
    <template v-slot:rightContentRender>
      <right-content :top-menu="$store.state.app.layout === 'topmenu'" :is-mobile="isMobile" :theme="$store.state.app.theme" />
    </template>
    <template>
      <page-header-wrapper v-if="showTop">
        <router-view />
      </page-header-wrapper>
      <router-view v-else />
    </template>
    <template v-slot:footerRender>
      <footer-tool-bar></footer-tool-bar>
    </template>
  </pro-layout>
</template>

<script>
import { updateTheme } from '../components/SettingDrawer/settingConfig';
import { i18nRender } from '@/locales';
import { mapGetters, mapState } from 'vuex';
import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types';

import defaultSettings from '@/config/defaultSettings';
import RightContent from '@/components/GlobalHeader/RightContent';
import FooterToolBar from '@/components/FooterToolbar/FooterToolBar';
import bus from '../views/components/bus';
 import storage from 'store';
 import { asyncRouterMap } from '@/config/router.config';

export default {
  name: 'BasicLayout',
  components: {
    RightContent,
    FooterToolBar
  },
  watch: {},
  data () {
    return {
      // preview.pro.antdv.com only use.
      isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
      // end
      isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',
      configRouter: asyncRouterMap,
      // base
      menus: [],
      // 侧栏收起状态
      collapsed: false,
      title: defaultSettings.title,
      settings: {
        // 布局类型
        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
        // CONTENT_WIDTH_TYPE
        contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
        // 主题 'dark' | 'light'
        theme: defaultSettings.navTheme,
        // 主色调
        primaryColor: defaultSettings.primaryColor,
        fixedHeader: defaultSettings.fixedHeader,
        fixSiderbar: defaultSettings.fixSiderbar,
        colorWeak: defaultSettings.colorWeak,
        hideHintAlert: false,
        hideCopyButton: false
      },
      // 媒体查询
      query: {},

      // 是否手机模式
      isMobile: false
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters
    }),
    ...mapGetters(['addRouters']),
    showTop () {
      let reg = /show_reports/g
      if (reg.test(this.$route.path)) {
        return false
      }
      let reg2 = /blank_view/g
      if (reg2.test(this.$route.path)) {
        return false
      }
      if ( this.$route.name === 'Workplace' ) {
        return false
      }
      if ( this.$route.name == 'House' ) {
        return false
      }
      if ( this.$route.name == 'Center' ) {
        return false
      }
      return true
    }
  },
  created () {
    const routes = this.addRouters.find(item => item.path === '/')
    this.menus = (routes && routes.children) || []
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    })
    this.$watch('isMobile', () => {
      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
    })
  },
  mounted () {
    bus.$on('onUserLogout',()=>{
      setTimeout(() => {
        this.menus = []
      }, 800)
    })
    this.collapsed = storage.get('NAV_COLLAPSE_BAR') || false;
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }

    this.$store.dispatch('GetUserStyle')
      .then(res=>{
        this.settings.layout = res.data.menuStyle
        this.settings.theme = res.data.pageStyle
        this.settings.primaryColor = res.data.themeStyle
        if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
          updateTheme(this.settings.primaryColor)
        }
      })
  },
  methods: {
    i18nRender,
    handleMediaQuery (val) {
      this.query = val
      if (this.isMobile && !val['screen-xs']) {
        this.isMobile = false
        return
      }
      if (!this.isMobile && val['screen-xs']) {
        this.isMobile = true
        this.collapsed = false
        this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
      }
    },
    // 切换测导航栏展开状态
    handleCollapse (val) {
      this.collapsed = val
      storage.set('NAV_COLLAPSE_BAR', val)
      this.$nextTick(() => {
        bus.$emit('onCollapse', 'change')
      })
    },
  }
}
</script>

<style lang="less">
@import "./BasicLayout.less";

  .logo {
    height: 44px;
    vertical-align: top;
    margin-right: 8px;
    border-style: none;
  }

  .ant-pro-basicLayout-children-content-wrap {
    height: 100%;
  }

  .logo_header img,
  .top_logo_header img {
    width: 100px;
    height: 35px;
    cursor: pointer;
  }

  .top_logo_header {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top_logo_header span {
    font-weight: 500;
    height: 64px;
    font-size: 20px;
    color: @primary-color;
  }

  .logo_header_collapsed img {
    width: 32px;
    height: 32px;
    margin-right: 0px;
    cursor: pointer;
  }

  .logo_header_collapsed {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo_header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo_header span {
    font-weight: 500;
    height: 64px;
    font-size: 20px;
  }

  .ant-pro-sider-menu-logo {
    padding: 0;
  }

</style>
<style>
  #app>section {
    height: 100% !important;
  }

  .ant-pro-top-nav-header-logo {
    width: 235px !important;
  }

  .ant-table-body {
    overflow-x: auto !important;
  }

  #app >>> section.sidemenu {
    min-height: 140vh !important;
  }
</style>
